<!doctype html>
<html class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<link rel="stylesheet" href="${ctxPath}/layui/css/layui.css">
<style type="text/css">
.see {
	width: 130px;
	display: inline-block;
}

#seea {
	margin-left: 180px;
}

#field {
	width: 700PX;
	margin-left: 200px;
}

#areac {
	width: 300px;
	display: inline-block;
}

</style>
<% include("/common/inc/_css.html"){} %>
<link rel="stylesheet" type="text/css" href="${ctxPath}/assets/webuploader/webuploader.css">

</head>
<body>
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<% include("/common/inc/_header.html"){} %>

	<div class="am-cf admin-main">
		<!-- sidebar start -->
		<% include("/common/inc/_menu.html"){} %>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">基本信息</strong>
					</div>
				</div>

				<hr>

				<form class="am-form" method="post" id="doc-vld-msg">
					<fieldset>
						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">产品名称</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="productName" id="doc-vld-name"
									minlength="2"
									class="am-input-sm"/>
							</div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">产品类别</div>
							<div class="am-u-sm-8 am-u-md-4">
								<select data-am-selected="{btnSize: 'sm'}" id="doc-select-1"
									name="product_type_id" required>
									<%
              						for(var item in pt!){%>
									<option value="${item.id}">${item.typeName}</option>
									<%}%>
									
								</select>
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>
						</div>

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">研发时间</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" class="demo-input" placeholder="请选择日期"
									id="test1" name="create_time" minlength="2"
									class="am-input-sm"/>

							</div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">详情链接</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="product_URL" id="doc-vld-name"
									class="am-input-sm"/>
							</div>
						</div>


						<div class="am-g am-margin-top">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">开发团队</div>
							<div class="am-u-sm-8 am-u-md-4">
								<input type="text" name="team" class="am-input-sm">
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>

							<div class="am-u-sm-4 am-u-md-2 am-text-right">成本价</div>
							<div class="am-u-sm-8 am-u-md-4">
								<input type="text" name="cost_price" class="am-input-sm">
							</div>
							<div class="am-hide-sm-only am-u-md-6"></div>
						</div>

						<div class="am-g am-margin-top-sm">
							<div class="am-u-sm-4 am-u-md-2 am-text-right">建议售价</div>
							<div class="am-u-sm-8 am-u-md-4 am-u-end">
								<input type="text" name="list_price" id="doc-vld-name" minlength="2"
									class="am-input-sm"/>
							</div>
							<br />
						</div>



						<div>
							<div class="admin-content">
								<div class="admin-content-body">
									<div class="am-cf am-padding am-padding-bottom-0">
										<div class="am-fl am-cf">
											<strong class="am-text-primary am-text-lg">产品图片</strong>
										</div>
									</div>
								</div>
								<hr>
								<fieldset id="field">
								
								
									<div>
									<div class="am-u-sm-8 am-u-md-4">
								 	主图 <div id="filePicker">选择图片</div>
									</div>
									<input type="hidden" id="imgName" name="master_map" value="">
									<div id="suolue"></div>

									
									
									<div class="am-u-sm-8 am-u-md-4">
								 	副图<div id="filePickerf">选择图片</div>
									</div>
									<br/>
									<input type="hidden" name="picture" value="">
									<div id="suoluef"></div>
								</div>
									
								</fieldset>
							</div>
						</div>





						<div>
							<div class="admin-content">
								<div class="admin-content-body">
									<div class="am-cf am-padding am-padding-bottom-0">
										<div class="am-fl am-cf">
											<strong class="am-text-primary am-text-lg">附加信息</strong>
										</div>
									</div>
								</div>
								<hr>
								<fieldset id="field">
									<h2>备注:</h2>
									<p>
										<textarea rows="5" id="intro" name="product_info"></textarea>
									</p>
								</fieldset>
							</div>
						</div>
						<div class="am-margin">
							<button id="btnTypeSave"
								class="am-btn am-btn-primary am-btn-xs btn-loading-example"
								data-am-loading="{spinner: 'circle-o-notch', loadingText: '提交中...', resetText: '提交保存'}">
								立即提交</button>
							<button type="button" class="am-btn am-btn-primary am-btn-xs">重置</button>
						</div>
					</fieldset>
				</form>


			</div>
			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->
	</div>

	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<% include("/common/inc/_js.html"){} %>
	<script type="text/javascript" src="${ctxPath}/assets/webuploader/webuploader.js"></script>
	
	<script src="${ctxPath}/assets/laydate/laydate.js"></script>
	<!-- 改成你的路径 -->
	<!-- ajax提交表单 -->
	<script src="${ctxPath}/assets/js/jquery.form.min.js"></script>
	<script src="${ctxPath}/assets/layui/layui.js"></script>
	<script type="text/javascript">
	//执行一个laydate实例
	laydate.render({
	  elem: '#test1' //指定元素
	});
	
	var mainUploader = WebUploader.create({

		 // 选完文件后，是否自动上传。
	    auto: true,
	    // swf文件路径
	    swf:  '${ctxPath}/assets/webuploader/Uploader.swf',

	    // 文件接收服务端。
	    server: '${ctxPath}/product/mastermap',

	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',

	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: false,
	    
	 // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	mainUploader.on( 'uploadSuccess', function( file,data ) {
	    var img=data.data;
	    alert(img);
	    //
	    $("input[name='master_map']").val(data.data); 
	    $("#suolue").append('<img src="${ctxPath}/upload/'+img+'" width="100px" height="100px">');
	});
	
	
	
	
	var mainUploader = WebUploader.create({

		 // 选完文件后，是否自动上传。
	    auto: true,
	    // swf文件路径
	    swf:  '${ctxPath}/assets/webuploader/Uploader.swf',

	    // 文件接收服务端。
	    server: '${ctxPath}/product/picture',

	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePickerf',

	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: false,
	    
	 // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	mainUploader.on( 'uploadSuccess', function( file,data ) {
		var imgf=data.data;
	    //
	    $("input[name='picture']").val(data.data);
	    $("#suoluef").append('<img src="${ctxPath}/upload/'+imgf+'" width="100px" height="100px">');
	   
	});

	
	
	
	 $(function(){
			$("#btnTypeSave").click(function(){
				$(".am-form").ajaxSubmit({
					success : function(data){
						if(data.errorCode=='0'){
							alert(data.errorMsg);
							window.location.href="${ctxPath}/product/list"; 
						}else{
							alert(data.errorMsg);
							return false;
						}
						
					}
				})
				return false;
			})
			
		}); 
		
	</script>
</body>
</html>
